<script setup>
</script>

<template>
  <div class="forum-home">
    <!-- 轮播图区域 -->
    <section class="banner-section">
      <div class="banner-container">
        <div class="banner-item active">
          <img src="../assets/tupian.jpg" alt="游戏推荐">
          <div class="banner-text">
            <h2>热门游戏推荐</h2>
            <p>最新最热的游戏尽在4399游戏论坛</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 游戏分类导航 -->
    <section class="game-categories">
      <h2>游戏专区</h2>
      <div class="categories-grid">
        <div class="category-item">
          <img src="../assets/image01.jpg" alt="动作游戏">
          <h3>动作游戏</h3>
        </div>
        <div class="category-item">
          <img src="../assets/image01.jpg" alt="益智游戏">
          <h3>益智游戏</h3>
        </div>
        <div class="category-item">
          <img src="../assets/image01.jpg" alt="冒险游戏">
          <h3>冒险游戏</h3>
        </div>
        <div class="category-item">
          <img src="../assets/image01.jpg" alt="射击游戏">
          <h3>射击游戏</h3>
        </div>
      </div>
    </section>

    <!-- 热门帖子 -->
    <section class="hot-posts">
      <h2>热门帖子</h2>
      <div class="posts-list">
        <div class="post-item">
          <div class="post-avatar">
            <img src="../assets/image01.jpg" alt="用户头像">
          </div>
          <div class="post-content">
            <h3>【攻略】如何通关最新游戏副本</h3>
            <p>分享一些实用的游戏技巧和通关方法...</p>
            <div class="post-meta">
              <span>玩家朋友</span>
              <span>2023-06-15</span>
              <span>浏览 1.2k</span>
            </div>
          </div>
        </div>
        
        <div class="post-item">
          <div class="post-avatar">
            <img src="../assets/image01.jpg" alt="用户头像">
          </div>
          <div class="post-content">
            <h3>新游戏上线，大家快来体验！</h3>
            <p>刚刚上线的新游戏，画面精美，玩法新颖...</p>
            <div class="post-meta">
              <span>游戏爱好者</span>
              <span>2023-06-14</span>
              <span>浏览 856</span>
            </div>
          </div>
        </div>
        
        <div class="post-item">
          <div class="post-avatar">
            <img src="../assets/image01.jpg" alt="用户头像">
          </div>
          <div class="post-content">
            <h3>游戏BUG反馈专区</h3>
            <p>收集游戏中遇到的BUG，帮助开发者改进...</p>
            <div class="post-meta">
              <span>测试玩家</span>
              <span>2023-06-13</span>
              <span>浏览 2.1k</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 论坛活动 -->
    <section class="forum-events">
      <h2>论坛活动</h2>
      <div class="events-list">
        <div class="event-item">
          <div class="event-date">
            <span class="day">15</span>
            <span class="month">6月</span>
          </div>
          <div class="event-content">
            <h3>夏日游戏节活动</h3>
            <p>参与活动赢取丰厚游戏礼包</p>
          </div>
        </div>
        
        <div class="event-item">
          <div class="event-date">
            <span class="day">20</span>
            <span class="month">6月</span>
          </div>
          <div class="event-content">
            <h3>新人玩家招募计划</h3>
            <p>老玩家带新玩家，一起游戏更快乐</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.forum-home {
  padding: 15px 0;
  height: 100%;
  overflow-y: auto;
}

.banner-section {
  margin-bottom: 20px;
}

.banner-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.banner-item {
  position: relative;
}

.banner-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 15px;
}

.banner-text h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

.banner-text p {
  margin: 0;
  font-size: 1rem;
}

.game-categories h2,
.hot-posts h2,
.forum-events h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
  border-left: 4px solid #ff6600;
  padding-left: 10px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.category-item {
  text-align: center;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.category-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.category-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

.category-item h3 {
  margin: 0;
  font-size: 1rem;
  color: #333;
}

.posts-list {
  margin-bottom: 30px;
}

.post-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.post-item:hover {
  background-color: #f9f9f9;
}

.post-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.post-content {
  flex: 1;
}

.post-content h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #333;
}

.post-content p {
  margin: 0 0 10px 0;
  color: #666;
  line-height: 1.4;
  font-size: 0.9rem;
}

.post-meta {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  color: #999;
}

.forum-events {
  margin-bottom: 20px;
}

.events-list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.event-item {
  display: flex;
  background: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-width: 250px;
}

.event-date {
  background: #ff6600;
  color: white;
  padding: 12px;
  text-align: center;
  min-width: 60px;
}

.event-date .day {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.event-date .month {
  display: block;
  font-size: 0.9rem;
}

.event-content {
  padding: 12px;
}

.event-content h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #333;
}

.event-content p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

/* 16:9比例适配 */
@media (min-width: 1024px) {
  .forum-home {
    height: 100%;
    overflow-y: auto;
    padding: 15px 0;
  }
  
  .banner-item img {
    height: 180px;
  }
  
  .categories-grid {
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .category-item {
    padding: 12px;
  }
  
  .category-item img {
    height: 90px;
  }
  
  .posts-list {
    margin-bottom: 25px;
  }
  
  .post-item {
    padding: 12px;
  }
  
  .forum-events {
    margin-bottom: 15px;
  }
  
  .events-list {
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .post-item {
    flex-direction: column;
  }
  
  .post-avatar {
    margin-bottom: 10px;
  }
  
  .events-list {
    flex-direction: column;
  }
  
  .event-item {
    min-width: auto;
  }
}
</style>
